<template>
<div>
  <div v-show="isShow">
    {{message}}
  </div>
  <div v-if="isShow">{{message}}</div>
  <button @click="reverseMessage">reverseMessage</button>
  <li v-for="item in fruits" :key="item.fruit">{{item.fruit}}</li>
  <p>{{inputValue}}</p>
  <input type="text" v-model="inputValue">
  <span v-once>Message:{{msg}}</span>
  <p>Using mustaches:{{rawHtml}}</p>
  <p>Using v-html <span v-html="rawHtml"></span></p>
</div>
</template>

<script>
export default{
    data(){
        return{
            msg:"hello",
            message:'hello china',
            isShow:false,
            fruits:[
              {fruit:"apple"},
              {fruit:"banana"},
              {fruit:"watermelon"}
            ],
            inputValue:"lly dhr"
      };
    },
    methods:{
      reverseMessage(){
        this.isShow=true,
        this.message = this.message.split('').reverse().join('')
    }
}
};
</script>

<style scoped>

</style>
